<template>
  <div class="cities-page">
    <!-- 页面标题和搜索 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">城市探索</h1>
        <p class="page-subtitle">发现世界各地的美丽城市，规划您的下一次旅行</p>
        
        <!-- 搜索栏 -->
        <div class="search-bar">
          <div class="search-input-group">
            <span class="search-icon">
              <i class="fas fa-search"></i>
            </span>
            <input type="text" class="search-field" placeholder="搜索城市、国家、特色...">
            <button class="search-button">搜索</button>
          </div>
          
          <div class="search-filters">
            <div class="filter-row">
              <select class="filter-select" v-model="filters.region">
                <option value="">所有地区</option>
                <option value="asia">亚洲</option>
                <option value="europe">欧洲</option>
                <option value="america">美洲</option>
                <option value="africa">非洲</option>
                <option value="oceania">大洋洲</option>
              </select>
              
              <select class="filter-select" v-model="filters.theme">
                <option value="">所有主题</option>
                <option value="culture">文化探索</option>
                <option value="nature">自然风光</option>
                <option value="food">美食之旅</option>
                <option value="shopping">购物天堂</option>
              </select>
              
              <select class="filter-select" v-model="filters.season">
                <option value="">最佳季节</option>
                <option value="spring">春季</option>
                <option value="summer">夏季</option>
                <option value="autumn">秋季</option>
                <option value="winter">冬季</option>
              </select>
              
              <select class="filter-select" v-model="sortBy">
                <option value="popularity">按热度排序</option>
                <option value="rating">按评分排序</option>
                <option value="name">按名称排序</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container main-container">
      <div class="layout-wrapper">
        <!-- 侧边栏筛选 -->
        <div class="sidebar">
          <div class="filter-card">
            <div class="filter-header">
              <h3 class="filter-title">筛选条件</h3>
            </div>
            
            <!-- 地区筛选 -->
            <div class="filter-section">
              <h4 class="section-title">地区</h4>
              <div class="checkbox-group">
                <label v-for="region in regions" :key="region.value" class="checkbox-label">
                  <input type="checkbox" 
                         :value="region.value" 
                         v-model="filters.regions">
                  <span class="checkmark"></span>
                  {{ region.name }}
                </label>
              </div>
            </div>
            
            <!-- 主题筛选 -->
            <div class="filter-section">
              <h4 class="section-title">旅行主题</h4>
              <div class="checkbox-group">
                <label v-for="theme in themes" :key="theme.value" class="checkbox-label">
                  <input type="checkbox" 
                         :value="theme.value" 
                         v-model="filters.themes">
                  <span class="checkmark"></span>
                  {{ theme.name }}
                </label>
              </div>
            </div>

            <!-- 评分筛选 -->
            <div class="filter-section">
              <h4 class="section-title">最低评分</h4>
              <div class="rating-slider">
                <input type="range" class="slider" min="0" max="5" step="0.5" v-model="filters.minRating">
                <span class="rating-value">{{ filters.minRating }}+</span>
              </div>
            </div>

            <button class="reset-button" @click="resetFilters">重置筛选</button>
          </div>

          <!-- 热门标签 -->
          <div class="tags-card">
            <div class="tags-header">
              <h4 class="tags-title">热门标签</h4>
            </div>
            <div class="tags-container">
              <span v-for="tag in popularTags" 
                    :key="tag"
                    class="tag"
                    @click="searchByTag(tag)">
                {{ tag }}
              </span>
            </div>
          </div>
        </div>
        
        <!-- 城市列表 -->
        <div class="content-area">
          <!-- 工具栏 -->
          <div class="toolbar">
            <div class="results-count">
              <span class="count-text">找到 {{ filteredCities.length }} 个城市</span>
            </div>
            
            <div class="view-controls">
              <!-- 视图切换 -->
              <div class="view-toggle">
                <button class="view-btn" 
                        :class="{ active: viewMode === 'grid' }"
                        @click="viewMode = 'grid'">
                  <i class="fas fa-th"></i>
                </button>
                <button class="view-btn" 
                        :class="{ active: viewMode === 'list' }"
                        @click="viewMode = 'list'">
                  <i class="fas fa-list"></i>
                </button>
              </div>
            </div>
          </div>

          <!-- 城市网格视图 -->
          <div v-if="viewMode === 'grid'" class="cities-grid">
            <div v-for="city in sortedCities" :key="city.id" class="city-card">
              <div class="card-image">
                <img :src="city.image" :alt="city.name" class="city-image">
                <div class="card-badges">
                  <span class="rating-badge">
                    <i class="fas fa-star"></i>{{ city.rating }}
                  </span>
                  <span class="region-badge">{{ city.region }}</span>
                </div>
              </div>
              
              <div class="card-content">
                <h3 class="city-name">{{ city.name }}</h3>
                <p class="country-name">{{ city.country }}</p>
                <p class="city-description">{{ city.description }}</p>
                
                <div class="tags-section">
                  <span v-for="tag in city.tags" :key="tag" class="city-tag">
                    {{ tag }}
                  </span>
                </div>
                
                <div class="city-stats">
                  <span class="stat"><i class="fas fa-users"></i>{{ city.visitors }}</span>
                  <span class="stat"><i class="fas fa-comment"></i>{{ city.reviews }}</span>
                  <span class="stat"><i class="fas fa-heart"></i>{{ city.favorites }}</span>
                </div>
                
                <button class="explore-button">
                  探索城市
                </button>
              </div>
            </div>
          </div>

          <!-- 城市列表视图 -->
          <div v-else class="cities-list">
            <div v-for="city in sortedCities" :key="city.id" class="list-item">
              <div class="list-image">
                <img :src="city.image" :alt="city.name" class="item-image">
              </div>
              <div class="list-content">
                <div class="list-header">
                  <h3 class="list-title">{{ city.name }}, {{ city.country }}</h3>
                  <span class="list-rating">
                    <i class="fas fa-star"></i>{{ city.rating }}
                  </span>
                </div>
                <p class="list-description">{{ city.description }}</p>
                <div class="list-tags">
                  <span v-for="tag in city.tags" :key="tag" class="list-tag">
                    {{ tag }}
                  </span>
                </div>
                <div class="list-stats">
                  <span class="stat"><i class="fas fa-users"></i>{{ city.visitors }} 访问</span>
                  <span class="stat"><i class="fas fa-comment"></i>{{ city.reviews }} 评价</span>
                  <span class="stat"><i class="fas fa-heart"></i>{{ city.favorites }} 收藏</span>
                </div>
                <button class="list-button">查看详情</button>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div v-if="totalPages > 1" class="pagination">
            <button class="page-btn" 
                    :disabled="currentPage === 1"
                    @click="changePage(currentPage - 1)">
              上一页
            </button>
            
            <div class="page-numbers">
              <button v-for="page in pages" 
                      :key="page"
                      class="page-number"
                      :class="{ active: page === currentPage }"
                      @click="changePage(page)">
                {{ page }}
              </button>
            </div>
            
            <button class="page-btn" 
                    :disabled="currentPage === totalPages"
                    @click="changePage(currentPage + 1)">
              下一页
            </button>
          </div>

          <!-- 无结果 -->
          <div v-if="filteredCities.length === 0" class="no-results">
            <div class="no-results-icon">
              <i class="fas fa-search"></i>
            </div>
            <h4 class="no-results-title">没有找到符合条件的城市</h4>
            <p class="no-results-text">请尝试调整筛选条件</p>
            <button class="no-results-button" @click="resetFilters">重置筛选</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Cities',
  data() {
    return {
      viewMode: 'grid',
      sortBy: 'popularity',
      currentPage: 1,
      itemsPerPage: 9,
      filters: {
        regions: [],
        themes: [],
        minRating: 0,
        region: '',
        theme: '',
        season: ''
      },
      regions: [
        { value: 'asia', name: '亚洲' },
        { value: 'europe', name: '欧洲' },
        { value: 'america', name: '美洲' },
        { value: 'africa', name: '非洲' },
        { value: 'oceania', name: '大洋洲' }
      ],
      themes: [
        { value: 'culture', name: '文化探索' },
        { value: 'nature', name: '自然风光' },
        { value: 'food', name: '美食之旅' },
        { value: 'shopping', name: '购物天堂' },
        { value: 'adventure', name: '冒险体验' }
      ],
      popularTags: ['浪漫', '文化', '美食', '购物', '海滩', '历史', '现代', '自然'],
      allCities: [
        {
          id: 1,
          name: '巴黎',
          country: '法国',
          region: 'europe',
          image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          rating: 4.8,
          description: '浪漫之都，艺术与文化的殿堂。拥有埃菲尔铁塔、卢浮宫等世界著名景点。',
          tags: ['浪漫', '文化', '美食', '艺术'],
          visitors: '12.5万',
          reviews: 1284,
          favorites: 8920,
          popularity: 95
        },
        {
          id: 2,
          name: '东京',
          country: '日本',
          region: 'asia',
          image: 'https://images.unsplash.com/photo-1540959733332-8ab43c4d2a93?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          rating: 4.7,
          description: '现代与传统完美融合的都市，从繁华的涩谷到宁静的寺庙。',
          tags: ['现代', '传统', '购物', '美食'],
          visitors: '10.8万',
          reviews: 956,
          favorites: 7230,
          popularity: 88
        },
        {
          id: 3,
          name: '纽约',
          country: '美国',
          region: 'america',
          image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          rating: 4.6,
          description: '世界之都，永不眠的城市，自由女神像、时代广场等地标性景点。',
          tags: ['都市', '文化', '商业', '购物'],
          visitors: '15.2万',
          reviews: 1842,
          favorites: 10500,
          popularity: 92
        },
        {
          id: 4,
          name: '巴厘岛',
          country: '印度尼西亚',
          region: 'asia',
          image: 'https://images.unsplash.com/photo-1537953773345-d172ccf13cf1?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          rating: 4.9,
          description: '热带天堂，度假胜地，拥有美丽的海滩和独特的文化。',
          tags: ['海滩', '度假', 'spa', '自然'],
          visitors: '8.7万',
          reviews: 723,
          favorites: 5680,
          popularity: 85
        },
        {
          id: 5,
          name: '伦敦',
          country: '英国',
          region: 'europe',
          image: 'https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          rating: 4.7,
          description: '历史与现代交融的国际大都市，大本钟、伦敦眼等著名地标。',
          tags: ['历史', '文化', '皇家', '购物'],
          visitors: '11.3万',
          reviews: 1024,
          favorites: 7890,
          popularity: 87
        },
        {
          id: 6,
          name: '悉尼',
          country: '澳大利亚',
          region: 'oceania',
          image: 'https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          rating: 4.8,
          description: '海滨城市，以悉尼歌剧院和海港大桥闻名世界。',
          tags: ['海滩', '现代', '文化', '自然'],
          visitors: '7.9万',
          reviews: 845,
          favorites: 6230,
          popularity: 83
        }
      ]
    }
  },
  computed: {
    filteredCities() {
      return this.allCities.filter(city => {
        // 地区筛选
        if (this.filters.regions.length > 0 && !this.filters.regions.includes(city.region)) {
          return false
        }
        
        // 主题筛选
        if (this.filters.themes.length > 0) {
          const hasTheme = this.filters.themes.some(theme => 
            city.tags.includes(this.getThemeTag(theme))
          )
          if (!hasTheme) return false
        }
        
        // 评分筛选
        if (city.rating < this.filters.minRating) {
          return false
        }
        
        return true
      })
    },
    
    sortedCities() {
      const cities = [...this.filteredCities]
      
      switch (this.sortBy) {
        case 'name':
          return cities.sort((a, b) => a.name.localeCompare(b.name))
        case 'rating':
          return cities.sort((a, b) => b.rating - a.rating)
        case 'popularity':
          return cities.sort((a, b) => b.popularity - a.popularity)
        default:
          return cities
      }
    },
    
    paginatedCities() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      return this.sortedCities.slice(start, start + this.itemsPerPage)
    },
    
    totalPages() {
      return Math.ceil(this.sortedCities.length / this.itemsPerPage)
    },
    
    pages() {
      const pages = []
      const start = Math.max(1, this.currentPage - 2)
      const end = Math.min(this.totalPages, start + 4)
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  methods: {
    getThemeTag(theme) {
      const themeMap = {
        culture: '文化',
        nature: '自然',
        food: '美食',
        shopping: '购物',
        adventure: '冒险'
      }
      return themeMap[theme] || theme
    },
    
    resetFilters() {
      this.filters = {
        regions: [],
        themes: [],
        minRating: 0,
        region: '',
        theme: '',
        season: ''
      }
      this.currentPage = 1
    },
    
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        window.scrollTo({ top: 0, behavior: 'smooth' })
      }
    },
    
    searchByTag(tag) {
      console.log('搜索标签:', tag)
    }
  },
  watch: {
    filters: {
      handler() {
        this.currentPage = 1
      },
      deep: true
    }
  }
}
</script>

<style scoped>
/* 基础布局 - 仅桌面端 */
.cities-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-header {
  background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
  padding: 3rem 0;
  border-bottom: 1px solid #e1e5e9;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.main-container {
  padding: 2rem 0;
}

.layout-wrapper {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
}

/* 页面标题 */
.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #718096;
  margin-bottom: 2rem;
}

/* 搜索栏 */
.search-bar {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-input-group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.search-icon {
  padding: 0.75rem 1rem;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: #718096;
}

.search-field {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-left: none;
  border-right: none;
  font-size: 1rem;
}

.search-button {
  padding: 0.75rem 1.5rem;
  background: #3182ce;
  color: white;
  border: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  font-weight: 600;
}

.search-filters {
  border-top: 1px solid #e2e8f0;
  padding-top: 1rem;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.filter-select {
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: white;
}

/* 侧边栏 */
.sidebar {
  position: sticky;
  top: 2rem;
}

.filter-card, .tags-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}

.filter-header, .tags-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.filter-title, .tags-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.filter-section {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f7fafc;
}

.section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 0.75rem;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #4a5568;
}

.rating-slider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slider {
  flex: 1;
}

.rating-value {
  font-weight: 600;
  color: #3182ce;
  min-width: 40px;
}

.reset-button {
  width: 100%;
  padding: 0.75rem;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #4a5568;
  cursor: pointer;
  margin: 1.5rem;
  width: calc(100% - 3rem);
}

.tags-container {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  padding: 0.25rem 0.5rem;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #4a5568;
  cursor: pointer;
}

.tag:hover {
  background: #edf2f7;
}

/* 内容区域 */
.content-area {
  min-height: 600px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
}

.results-count {
  font-size: 0.9rem;
  color: #718096;
}

.view-toggle {
  display: flex;
  background: #f7fafc;
  border-radius: 6px;
  padding: 2px;
}

.view-btn {
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  color: #718096;
}

.view-btn.active {
  background: white;
  color: #3182ce;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 城市网格 */
.cities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.city-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.city-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card-image {
  position: relative;
  height: 200px;
}

.city-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.rating-badge, .region-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.rating-badge {
  background: #38a169;
  color: white;
}

.region-badge {
  background: rgba(255,255,255,0.9);
  color: #2d3748;
}

.card-content {
  padding: 1.25rem;
}

.city-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.25rem;
}

.country-name {
  font-size: 0.9rem;
  color: #718096;
  margin-bottom: 0.75rem;
}

.city-description {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.city-tag {
  padding: 0.2rem 0.5rem;
  background: #f7fafc;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #4a5568;
}

.city-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: #718096;
}

.explore-button {
  width: 100%;
  padding: 0.75rem;
  background: #3182ce;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

/* 列表视图 */
.cities-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.list-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.list-image {
  height: 150px;
}

.item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 0.5rem;
}

.list-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.list-rating {
  background: #38a169;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.list-description {
  font-size: 0.9rem;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 1rem;
  flex: 1;
}

.list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.list-tag {
  padding: 0.25rem 0.5rem;
  background: #3182ce;
  color: white;
  border-radius: 4px;
  font-size: 0.8rem;
}

.list-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: #718096;
}

.list-button {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  background: #3182ce;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem 0;
}

.page-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  cursor: pointer;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 0.5rem;
}

.page-number {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  cursor: pointer;
}

.page-number.active {
  background: #3182ce;
  color: white;
  border-color: #3182ce;
}

/* 无结果 */
.no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: #718096;
}

.no-results-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #cbd5e0;
}

.no-results-title {
  font-size: 1.2rem;
  color: #4a5568;
  margin-bottom: 0.5rem;
}

.no-results-text {
  margin-bottom: 1.5rem;
}

.no-results-button {
  padding: 0.75rem 1.5rem;
  background: #3182ce;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* 移除所有响应式断点，仅保留桌面端样式 */
</style>